<template>
  <div class="login">
    <div class="login-con">
      <Card class="login-card" icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <!-- <login-form @on-success-valid="handleSubmit"></login-form> -->
          <Form
            @keyup.enter.native="login"
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
          >
            <FormItem prop="userName">
              <i-input type="text" placeholder="请输入账号" v-model="formInline.userName">
                <i class="iconfont icon-yonghu" slot="prepend"></i>
              </i-input>
            </FormItem>
            <FormItem prop="password">
              <i-input type="password" placeholder="请输入密码" v-model="formInline.password">
                <i class="iconfont icon-mima" slot="prepend"></i>
              </i-input>
            </FormItem>
              <FormItem style="text-align:right">
                <Button type="text" size="small" ghost @click="modifypwd">修改密码</Button>
              </FormItem>
            <FormItem>
              <Button type="info" long @click="login">登录</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
    <Alert
      :isAlertVisible="isAlertVisible"
      :alertMsg="alertMsg"
      @alertCancel="isAlertVisible = false"
      @alertConfirm="isAlertVisible = false"
      :isLogin="true"
    ></Alert>
  </div>
</template>

<script>
// import LoginForm from './login-form'
import { mapActions } from "vuex";
import Alert from "../../components/Alert/Alert.vue";
import { reqLoginVerify } from "../../api";

// import { constants } from 'crypto';

export default {
  data() {
    return {
      formInline: {
        userName: "",
        password: ""
      },
      ruleInline: {
        userName: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ]
      },
      alertMsg: "",
      isAlertVisible: false,
      isLogin: true
    };
  },
  components: {
    // LoginForm,
    Alert
  },
  methods: {
    ...mapActions(["handleLogin"]),
    modifypwd() {
      this.$router.push({ name: "modify-pwd" });
    },
    async handleSubmit() {
      let params = new FormData()
      params.append("username",this.formInline.userName)
      params.append("password",this.formInline.password)
      let result = await reqLoginVerify(params);
      if (result.code === 6000) {
        //登陆成功,保存用户信息
        let userinfo = result.data;
        this.handleLogin(userinfo);
        this.$router.replace({ name: "_home" });
        // this.$store.dispatch('getUserInfo')
      } else if (result.code === 9206) {
        //首次以admin登录，跳转到注册界面
        console.log("to register");
        let userinfo = {
          username: "",
          user_guid: ""
        };
        this.setUserInfo(userinfo);
        this.$router.push({ name: "register" });
      } else {
        this.alertMsg = "用户名或密码错误";
        this.isAlertVisible = true;
        this.isLogin = true;
      }
    },
    login() {
      //先进行前端初步验证
      if (!this.formInline.userName || !this.formInline.password) {
        this.$Message.warning("请输入账号和密码");
      } else {
        this.handleSubmit();
      }
    }
  }
};
</script>

<style lang="less">
@import "./login.less";
</style>